<template>
	<view class="container">
		<view class="userinfo" v-if="userInfo">
			<image :src="userInfo.avatarUrl" class="userinfo-avatar"></image>
			<text class="userinfo-nickname">{{ userInfo.nickName }}</text>
		</view>
		<button class="button" @click="getUserInfo">使用用户微信信息1（弃用)</button>
		<button class="button" @click="getUserProfile">使用用户微信信息2（弃用)</button>
		<button class="button" open-type="getUserInfo" @getuserinfo="onGetUserInfo">使用用户微信信息3（弃用)</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'http://www.wechat.com', //本地后台请求域名
				userInfo: {}
			};
		},
		onLoad(options) {
			//console.log(123);
		},
		onShow() {
			//console.log(456);
		},
		methods: {
			getUserInfo() {
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						console.log('用户昵称为：' + infoRes.userInfo.nickName);
					}
				});
			},
			getUserProfile() {
				if (uni.getUserProfile) {
					uni.getUserProfile({
						desc: '用于完成头像生成功能', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success: (res) => {
							console.log("获取用户信息成功", res)
						},
						fail: res => {
							console.log("获取用户信息失败", res)
						}
					})
				} else {
					console.log("获取用户信息失败,uni.getUserProfile不可用")
				}
			},
			onGetUserInfo(e) {
				if (e.detail.userInfo) {
					this.userInfo = e.detail.userInfo;
					// 在这里可以将用户信息传递给服务器或进行其他操作
					console.log("用户信息：", this.userInfo);
				} else {
					console.log("用户拒绝授权");
				}
			},
			onGetPhoneNumber(e) {
				console.log("用户信息：", e.detail);
				if (e.detail.code) {
					uni.request({
						url: this.url + '/wechat/getPhoneNumber',
						method: 'POST',
						data: {
							phone_code: e.detail.code
						},
						header: {},
						success: (res) => {
							//console.log(res.data);
							this.phone = res.data.data;
						}
					});
				} else {
					console.log("用户信息：", e.detail);
				}
			},
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	.button {
		margin-top: 20px;
	}

	.userinfo {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.userinfo-avatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}

	.userinfo-nickname {
		margin-top: 10px;
	}
</style>